<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ECharts Data Item Highlight Cycling</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="chart" style="width: 100%; height: 500px"></div>
    <script>
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);

      // 定义图表选项
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Sales",
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  // 定义高亮颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#bda29a",
                    "#6e7074",
                    "#546570",
                    "#c4ccd3",
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };

      // 设置图表选项
      myChart.setOption(option);

      // 轮询高亮显示数据项
      let currentIndex = -1;
      let intervalId = null;

      function startPolling() {
        intervalId = setInterval(function () {
          // 取消之前高亮的图形
          if (currentIndex !== -1) {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: currentIndex,
            });
          }

          // 高亮当前图形
          currentIndex = (currentIndex + 1) % option.series[0].data.length;
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });

          // 联动显示 tooltip
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
        }, 2000);
      }

      function stopPolling() {
        if (intervalId) {
          clearInterval(intervalId);
          intervalId = null;
        }
      }

      // 添加鼠标移入/移出事件监听
      chartDom.addEventListener("mouseenter", stopPolling);
      chartDom.addEventListener("mouseleave", startPolling);

      // 启动轮询
      startPolling();
    </script>
  </body>
</html>
